﻿<template>
  <a-card :bordered="false">
    <div class="cardBox" :style="{height: getCardHeight}">
      <a-card ref="card1" title="我的发起" style="width: 49%" :bodyStyle="bodyStyle">
        <span slot="extra" style="cursor: pointer">
          <a-icon
            type="plus"
            style="font-size: 18px"
            v-if="hasPerm('ServiceWorkOrderDetail.Add')"
            @click="handleAdd()"
          />
          &nbsp;
          <a-icon type="sync" style="font-size: 18px" @click="getDataList(true)" :spin="spin1"/>
        </span>
        <a-table
          ref="table"
          :scroll="{ y: tableHeight }"
          :columns="columns"
          :rowKey="(row, index) => row.Id"
          :dataSource="cardData1"
          :pagination="pagination1"
          :loading="spin1"
          @change="handleTableChange"
          :bordered="true"
          size="small"
        >
          <template slot="State" slot-scope="text">
            <a-tag :color="getColorAndContent(text,StateInfos).color">
              {{ getColorAndContent(text, StateInfos).content }}
            </a-tag>
          </template>
          <span slot="CreateTime" slot-scope="CreateTime">{{ timeFormat(CreateTime) }}</span>
          <span slot="action" slot-scope="text, record">
            <template>
              <a v-if="hasPerm('ServiceWorkOrderDetail.View')" @click="handleDele(record, '查看工单')">查看</a>
              <a-divider
                v-if="hasPerm('ServiceWorkOrderDetail.View') && hasPerm('ServiceWorkOrderDetail.Edit')&&record.State<2"
                type="vertical"
              />
              <a v-if="hasPerm('ServiceWorkOrderDetail.Edit')&&record.State<2"
                 @click="handleEdit(record, '编辑工单')">编辑</a>
              <a-divider
                v-if="hasPerm('ServiceWorkOrderDetail.Edit') && hasPerm('ServiceWorkOrderDetail.Delete')&&record.State<2"
                type="vertical"
              />
              <a v-if="hasPerm('ServiceWorkOrderDetail.Delete')&&record.State<2"
                 @click="handleDelete([record.Id])">删除</a>
            </template>
          </span>
          <span slot="SWOType" slot-scope="text">
            <a-tag :color="getColorAndContent(text,SWOTypeInfos).color">{{ text }}</a-tag>
          </span>
        </a-table>
      </a-card>
      <a-card title="我的待办" style="width: 49%" :bodyStyle="bodyStyle">
        <span slot="extra" style="cursor: pointer">
          <a-icon type="sync" style="font-size: 18px" @click="getDataList2(true)" :spin="spin2"/>
        </span>
        <a-table
          ref="table"
          :scroll="{ y: tableHeight }"
          :columns="columnsARR"
          :rowKey="(row, index) => row.Id"
          :dataSource="cardData2"
          :pagination="pagination2"
          :loading="spin2"
          @change="handleTableChange2"
          :bordered="true"
          size="small"
        >
          <span slot="CreateTime" slot-scope="CreateTime">{{ timeFormat(CreateTime) }}</span>
          <span slot="action" slot-scope="text, record">
            <template>
              <a v-if="hasPerm('ServiceWorkOrderDetail.Edit')" @click="handleEdit1(record.Id)">回复</a>
            </template>
          </span>
        </a-table>
      </a-card>
    </div>
    <edit-form ref="editForm" :parentObj="this"></edit-form>
    <edit-form1 ref="editForm1" :parentObj="this"></edit-form1>
    <dele ref="del" :parentObj="this"></dele>
  </a-card>
</template>

<script>
import EditForm1 from './EditForm.vue'
import dele from '../ServiceWorkOrderMain/dele.vue'
import EditForm from '../ServiceWorkOrderMain/EditForm.vue'
import moment from 'moment'
import OperatorCache from '@/utils/cache/OperatorCache'

const columns = [
  { title: '标题', dataIndex: 'SWOTitle' },
  {
    title: '状态',
    dataIndex: 'State',
    width: '90px',
    scopedSlots: { customRender: 'State' },
    align: 'center'
  },
  { title: '类型', dataIndex: 'SWOType', scopedSlots: { customRender: 'SWOType' }, width: '90px', align: 'center' },
  {
    title: '创建时间',
    dataIndex: 'CreateTime',
    scopedSlots: { customRender: 'CreateTime' },
    width: '100px'
  },
  { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, width: '140px' }
]
const columnsARR = [
  { title: '标题', dataIndex: 'SWOTitle' },
  { title: '客户名称', dataIndex: 'CustomerName' },

  {
    title: '创建时间',
    dataIndex: 'CreateTime',
    scopedSlots: { customRender: 'CreateTime' },
    width: '100px'
  },
  { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, width: '50px' }
]
export default {
  components: {
    EditForm,
    EditForm1,
    dele
  },
  mounted () {
    this.$nextTick(() => {
      // 页面渲染完成后的回调
      this.tableHeight = this.getTableHeight(true) + 24
    })
    this.getDataList()
    this.getDataList2()
  },
  computed: {
    op () {
      return OperatorCache.info
    },
    // card滚动区高度
    getCardHeight: function () {
      return (this.tableHeight + 154) + 'px' // 自定义高度需求
    }
  },
  data () {
    return {
      data: [],
      tableHeight: 570, // 表格高度
      columnsARR,
      pagination1: {
        current: 1,
        pageSize: 50,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['20', '30', '40', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      pagination2: {
        current: 1,
        pageSize: 20,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['20', '30', '40', '50', '100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
        showSizeChanger: true
      },
      bodyStyle: {
        padding: 0
      },
      filters: {},
      sorter: { field: 'CreateTime', order: 'desc' },
      loading: false,
      columns,
      queryParam: {},
      selectedRowKeys: [],
      cardData1: [],
      cardData2: [],
      spin1: false,
      spin2: false,
      flag: true,
      SWOTypeInfos: [
        { text: '投诉处理', color: 'red' },
        { text: '客户跟进', color: 'orange' },
        { text: '样品服务', color: 'blue' },
        { text: '技术服务', color: 'purple' }
      ],
      StateInfos: [
        { text: '0', color: 'cyan', content: '发起' },
        { text: '1', color: 'blue', content: '启动' },
        { text: '2', color: 'orange', content: '执行' },
        { text: '3', color: 'red', content: '超时' },
        { text: '4', color: 'green', content: '关闭' }
      ]
    }
  },
  methods: {
    handleTableChange (pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.getDataList()
    },
    handleTableChange2 (pagination, filters, sorter) {
      this.pagination2 = { ...pagination }
      this.filters = { ...filters }
      this.getDataList2()
    },
    getDataList () {
      console.log(this.op)
      this.spin1 = true
      this.$http
        .post('/SWOManagement/ServiceWorkOrderMain/GetDataListByMySelfCustomer', {
          PageIndex: this.pagination1.current,
          PageRows: this.pagination1.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: [
            {
              Condition: 'CreatorId',
              Keyword: this.op.Id
            }
          ],
          ...this.filters
        })
        .then(resJson => {
          this.spin1 = false
          if (resJson.Success) {
            this.cardData1 = resJson.Data
            this.pagination1.total = resJson.Total
          }
        })
    },
    getDataList2 () {
      this.spin2 = true
      this.$http
        .post('/SWOManagement/ServiceWorkOrderMain/GetDataListByMyToDo', {
          PageIndex: this.pagination1.current,
          PageRows: this.pagination1.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: [],
          ...this.filters
        })
        .then(resJson => {
          this.spin2 = false
          if (resJson.Success) {
            this.cardData2 = resJson.Data
            this.pagination2.total = resJson.Total
          }
        })
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    hasSelected () {
      return this.selectedRowKeys.length > 0
    },
    handleAdd () {
      this.$refs.editForm.openForm(null, '发起工单', false, 'my')
    },
    handleDele (id, title) {
      this.$refs.del.openForm(id, title)
    },
    handleEdit (record, title) {
      this.$refs.editForm.openForm(record, title)
    },
    handleEdit1 (record) {
      this.$refs.editForm1.openForm(record, '回复工单')
    },
    handleDelete (ids) {
      var thisObj = this
      this.$confirm({
        title: '确认删除吗?',
        onOk () {
          return new Promise((resolve, reject) => {
            thisObj.$http.post('/SWOManagement/ServiceWorkOrderMain/DeleteData', ids).then(resJson => {
              resolve()
              if (resJson.Success) {
                thisObj.$message.success('操作成功!')
                thisObj.getDataList()
              } else {
                thisObj.$message.error(resJson.Msg)
              }
            })
          })
        }
      })
    },
    getColorAndContent (text, items) {
      for (let i = 0; i < items.length; i++) {
        if (items[i].text === text) {
          return items[i]
        }
      }
    },
    timeFormat (val) {
      // 时间格式化函数
      return moment(val).format('YYYY-MM-DD')
    }
  }
}
</script>
<style scoped>
.cardBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
